<template>
  <view class="loading-mark" v-show="isShow">
    <image src="../../asstes/images/icon/loading_logo.png" />
  </view>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import { commonStore } from "@/stores/common";
export default defineComponent({
  name: "Upload",
  props: {
    txt: {
      type: String,
      default() {
        return "";
      },
    },
  },

  setup(props, { emit }) {
    const state = reactive({
      isShow: commonStore().isLoading,
    });

    watch(
      () => commonStore().isLoading,
      (value) => {
        state.isShow = value;
      },
      { deep: true }
    );
    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="scss">
.loading-mark {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  image {
    width: 150rpx;
    height: 150rpx;
    animation: move 0.8s infinite;
  }
  @keyframes move {
    0% {
      transform: translateY(-50rpx);
    }
    20% {
      transform: translateY(10rpx);
    }

    100% {
      transform: translateY(-50rpx);
    }
  }
}
</style>
